<template>
  <div class="statistics-container">
    <div class="stat-item">
      <div class="stat-value">{{ schoolCount }}</div>
      <div class="stat-label">高校总数</div>
    </div>
    <div class="stat-item">
      <div class="stat-value">{{ majorCount }}</div>
      <div class="stat-label">专业数量</div>
    </div>
    <div class="stat-item">
      <div class="stat-value">{{ provinceCount }}</div>
      <div class="stat-label">覆盖省份</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import { getCountStatisticsApi } from "@/interface"

const schoolCount = ref(0)
const majorCount = ref(0)
const provinceCount = ref(0)
onMounted(async () => {
  const res: Record<string, any> = await getCountStatisticsApi()
  console.log(res)
  schoolCount.value = res.schoolCount
  majorCount.value = res.majorCount
  provinceCount.value = res.provinceCount
})
</script>

<style lang="scss" scoped>
.statistics-container {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .stat-item {
    text-align: center;

    .stat-value {
      font-size: 24px;
      font-weight: bold;
      color: var(--primary-color);
    }

    .stat-label {
      font-size: 14px;
      color: var(--text-secondary);
      margin-top: 4px;
    }
  }
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
</style>
